<template>
  <div>
    <el-table
      :data="
        textList.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      :border="false"
    >
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column
        prop="PMCID"
        label="ID"
        width="120"
        show-overflow-tooltip
      ></el-table-column>
      <!-- 标题 -->
      <el-table-column
        label="标题"
        width="530"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-link
            :href="`https://www.ncbi.nlm.nih.gov/pmc/articles/${scope.row.PMCID}/`"
            target="_blank"
            type="primary"
            >{{ scope.row.title }}</el-link
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者"
        width="120"
        show-overflow-tooltip
      ></el-table-column>

      <!-- 状态和操作 -->
      <el-table-column label="状态" width="100">
        <template slot-scope="scope"
          ><el-tag v-if="scope.row.state == 2" type="warning">准备提取</el-tag>
          <el-tag v-else-if="scope.row.state == 3" type="warning"
            >正在下载</el-tag
          >
          <el-tag v-else-if="scope.row.state == 4" type="success"
            >已保存</el-tag
          >
          <el-tag v-else-if="scope.row.state == 5" type="danger"
            >下载失败</el-tag
          ></template
        >
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.state == 2"
            type="primary"
            @click="handleDownload(scope)"
            >下载<i class=""></i
          ></el-button>
          <el-button
            v-if="scope.row.state == 2"
            type="warning"
            @click="handleCancel(scope)"
            >取消<i class=""></i
          ></el-button>
          <el-button
            v-else-if="scope.row.state == 3"
            type="primary"
            :loading="true"
            >下载中<i class=""></i
          ></el-button>
          <el-button
            v-else-if="scope.row.state == 4"
            type="success"
            @click="handleTranslate(scope)"
            >翻译</el-button
          >
          <el-button
            v-else-if="scope.row.state == 5"
            type="primary"
            @click="handleDownload(scope)"
            >重试</el-button
          >
          <el-button
            v-if="scope.row.state == 5"
            type="warning"
            @click="handleCancel(scope)"
            >取消<i class=""></i
          ></el-button> </template
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import stateCode from "@/js/stateCode";
import api from '@/api/index';
export default {
  name: "DataTable",
  data() {
    return {};
  },
  computed: {
    ...mapState(["dataList"]),
    ...mapState("download", ["currentPage", "pageSize", "isLoading"]),
    ...mapGetters("download", ["textList"]),
  },
  methods: {
    // 下载
    handleDownload(scope) {
      this.$store.dispatch("download/download_request", {
        PMCID: scope.row.PMCID,
      });
    },
    // 取消
    handleCancel(scope) {
      this.$store.commit("UPDATESTATE", {
        PMCID: scope.row.PMCID,
        state: stateCode("未提取"),
      });
    },
    handleTranslate(scope) {
      console.log(scope.row);
      scope.row.en_title = scope.row.title;
      //调用API翻译
      api.transApi.translate(scope.row.title).then(
        response=>{
          if (response.data.trans_result){
            let zh_title = response.data.trans_result[0].dst;
            scope.row.title = zh_title;
          }else{
            scope.row.title = "翻译失败";
          }
          
        },
        error=>{
          console.log(error.message);
        },
        
      ).catch(
        a=>{console.log(a)}
      )
    },
  },
  mounted() {
    console.log(this.$store.getters);
  },
};
</script>
